<template>
  <view>
    <cu-custom
      :bgImage="bgImage"
      topTitle="注册"
      :needBack="true"
      backIconColor="#ffffff"
      titleClass="commTitle white"
    ></cu-custom>
    <view class="content">
      <img src="@/static/images/login/bottom.png" class="top_img" />
      <view class="welcome">
        <view class="p1">您好</view>
        <view class="p2">期待你加入我们</view>
      </view>
      <view class="login-content">
        <view>
          <view class="form">
            <!-- 手机号 -->
            <view class="item_box">
              <view class="item">
                <view class="icon">
                  <image src="../../static/images/login/icon_name.png"></image>
                </view>
                <view class="line"></view>
                <view class="input">
                  <u-input
                    v-model="form.userName"
                    type="text"
                    :maxlength="20"
                    placeholder="请输入注册组织名称"
                  />
                </view>
              </view>
            </view>
            <!-- 密码 -->
            <view class="item_box">
              <view class="item">
                <view class="icon">
                  <image src="../../static/images/login/icon_phone.png"></image>
                </view>
                <view class="line"></view>
                <view class="input">
                  <u-input
                    v-model="form.phonenumber"
                    :maxlength="11"
                    placeholder="请输入手机号"
                    :password-icon="false"
                  />
                </view>
              </view>
            </view>
            <!-- <view class="item_box">
              <view class="item">
                <view class="icon">
                  <image src="../../static/images/login/icon_pwd.png"></image>
                </view>
                <view class="line"></view>
                <view class="input">
                  <u-input
                    v-model="form.password"
                    type="password"
                    :maxlength="11"
                    placeholder="请输入密码"
                    :password-icon="false"
                  />
                </view>
              </view>
            </view> -->
            <view class="item_box">
              <view class="item">
                <view class="icon">
                  <image src="../../static/images/login/icon_pwd.png"></image>
                </view>
                <view class="line"></view>
                <view class="input">
                  <u-input
                    v-model="form.code"
                    type="number"
                    :maxlength="6"
                    placeholder="请输入验证码"
                  />
                </view>
                <view class="code" @tap="getCode">{{ codeText }}</view>
              </view>
            </view>
          </view>
        </view>
        <button
          class="login-button"
          :class="canLogin ? 'can-login' : ''"
          @tap="toLogin"
        >
          注册
        </button>
      </view>
      <view class="people-img">
        <image src="../../static/images/login/people.png"></image>
      </view>
    </view>
  </view>
</template>

<script>
// AES加密
import { aesEncrypt } from "@/utils/aes";
// 通用验证方法
import { checkPhone } from "@/utils/common";
// 单个页面所需接口
import { getToken } from "@/api/my";
import { register, sendMobileMessage } from "@/api/user";
export default {
  data() {
    return {
      bgImage: require("../../static/images/login/header.png"),
      form: {
        phonenumber: "", // 手机号
        // password: "",
        code: "", // 验证码
        userName: "", // 组织名称
      },
      showProtocal: false,
      canLogin: false,
      protocolTitle: "",
      protocalContent: "",
      codeText: "获取验证码",
      canGetCode: true,
      waitTime: 60,
    };
  },
  methods: {
    // 获取验证码
    getCode() {
      if (!this.form.phonenumber) {
        uni.showToast({
          title: "请输入手机号",
          icon: "none",
        });
      } else if (!checkPhone(this.form.phonenumber)) {
        uni.showToast({
          title: "请输入正确的手机号",
          icon: "none",
        });
      } else {
        if (this.canGetCode) {
          this.waitTime--;
          this.canGetCode = false;
          this.codeText = `${this.waitTime}s`;
          let timer = setInterval(() => {
            if (this.waitTime > 1) {
              this.waitTime--;
              this.codeText = `${this.waitTime}s`;
            } else {
              clearInterval(timer);
              this.codeText = "重新发送";
              this.canGetCode = true;
              this.waitTime = 60;
            }
          }, 1000);
          sendMobileMessage({
            terminal_type: "DECLARATION_WECHAT",
            phone: this.form.phonenumber,
            codeType: "1",
          });
        }
      }
      // }
    },
    checkLogin() {
      this.canLogin = this.form.phonenumber && this.form.password;
    },
    async toLogin() {
      const _ts = this;
      if (!this.form.userName) {
        uni.showToast({
          title: "请填写组织名称",
          icon: "none",
        });
        return;
      }
      if (!this.form.phonenumber) {
        uni.showToast({
          title: "请输入手机号",
          icon: "none",
        });
        return;
      }
      if (!this.form.code) {
        uni.showToast({
          title: "请输入验证码",
          icon: "none",
        });
        return;
      }
      register({ ...this.form, nickName: this.form.userName }).then((res) => {
        // console.log("res===", res);
        if (res.code == 200) {
          uni.showToast({
            title: "注册成功",
            icon: "none",
          });
          setTimeout(() => {
            uni.navigateTo({ url: "/pages/home/login" });
          }, 1000);
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
          });
        }
      });
    },
    showProtocol(index) {
      if (index === 1) {
        this.protocolTitle = "惠开灵工注册协议";
        this.protocalContent = "惠开灵工注册协议";
        this.showProtocal = true;
      } else {
        this.protocolTitle = "隐私条款";
        this.protocalContent = "隐私条款";
        this.showProtocal = true;
      }
    },
    register() {
      // uni.navigateTo({
      //   url: `./register`
      // });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  position: relative;
  width: 100%;
  height: 90vh;
  background: #f5f7ff;

  .top_img {
    width: 100%;
    height: 521rpx;
  }

  .welcome {
    position: absolute;
    z-index: 13;
    left: 52rpx;
    top: 126rpx;
    .p1 {
      font-size: 65rpx;
      font-weight: 500;
      color: #ffffff;
    }
    .p2 {
      margin-top: 10rpx;
      font-size: 50rpx;
      font-weight: 500;
      color: #ffffff;
    }
  }

  .login-content {
    position: absolute;
    top: 334rpx;
    left: 24rpx;
    z-index: 10;
    width: 702rpx;
    background: #fff;
    border-radius: 31rpx;
    font-size: 24rpx;
    text-align: center;
    padding-top: 120rpx;
    height: 641rpx;
    box-shadow: 0px 4rpx 8rpx 0px rgba(124, 144, 222, 0.5);

    .login-title {
      margin: 48rpx 0 96rpx 0;
      text-align: center;
      font-size: 40rpx;
      font-weight: 600;
      color: #282a31;
    }

    .form {
      width: 632rpx;
      margin: 0 auto;

      .item_box {
        margin-bottom: 20rpx;

        .item {
          display: flex;
          align-items: center;
          height: 88rpx;
          border-bottom: 1px solid rgba(132, 132, 132, 0.2);
          // padding: 0 24rpx;
          .icon {
            image {
              width: 32rpx;
              height: 32rpx;
            }
          }
          .line {
            width: 1rpx;
            height: 18rpx;
            background: #000000;
            opacity: 0.22;
            margin: 0 30rpx;
          }
          .input {
            flex: 1;
          }
        }

        .login_input_error {
          border: 1px solid #e5503f;
        }

        .input_error {
          color: #e5503f;
          font-size: 24rpx;
          line-height: 24rpx;
          margin-top: 16rpx;
          margin-left: 20rpx;
          text-align: left;
        }
      }
    }

    .login-button {
      width: 632rpx;
      height: 88rpx;
      line-height: 88rpx;
      background: linear-gradient(90deg, #417ffc, #505eeb);
      box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(22, 121, 253, 0.28);
      border-radius: 43rpx;
      font-size: 36rpx;
      font-weight: 500;
      color: #ffffff;
      margin-top: 80rpx;
    }

    .login-button:after {
      border: none;
    }

    .can-login {
      background: #436be6;
    }

    .btn-group {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      color: #4974f5;
      margin-top: 16rpx;
      font-size: 28rpx;

      .item {
        margin: 0 58rpx;
      }
    }
  }

  .people-img {
    position: absolute;
    right: 53rpx;
    top: 24rpx;
    z-index: 11;
    image {
      width: 348rpx;
      height: 355rpx;
    }
  }
}
.code {
  width: 180rpx;
  padding-left: 24rpx;
  text-align: center;
  color: #436be6;
  font-size: 28rpx;
  height: 88rpx;
  line-height: 88rpx;
  position: relative;
  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20rpx;
    width: 4rpx;
    height: 48rpx;
    background: #c5cbda;
  }
}
</style>
